<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <%@ include file="/common/common.jsp" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>用户列表</title>
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/dist/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/plugins/datatables/css/matrix-style.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/plugins/datatables/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <style>
        button.searching{
            background-color:#666
        }
    </style>
</head>
<body>
<div class="widget-box">
	<div class="widget-title">
	   <h5>请输入查询条件</h5>
	</div>
	<div class="widget-content nopadding">
		<table style="line-height:45px;font-size:12px;">
			<tr>
				<td>&nbsp;&nbsp;&nbsp;电话号码：</td>
				<td><input type="text" class="form-control" name="telphone" id="telphone"  style="width:200px;" placeholder="电话号码" ></td>
				<td>
				<td>&nbsp;&nbsp;&nbsp;状态：</td>
				<td>
					<select class="form-control" id="isable">
					 	<option value="">请选择</option>
						<option value="1">正常</option>
						<option value="2">冻结</option>
					</select>
				<td>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-success" href="javascript:void(0)" onclick="query();">查 询</a>
				</td>
				<td>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" href="${ctx}/api/user/addUserPage">新增</a>
				</td>		
			</tr>
		</table>
	</div>
</div>
 <div class="row">
	 <div class="col-xs-12">
	 	<div class="box">
	 		<div class="box-header">
	                <h3 class="box-title">用户列表</h3>
	            </div>
	            <!-- 列表 -->
	            <div class="box-body table-responsive">
	            	<table id="dataTables" class="table table-bordered table-hover">
	            	</table>
	            </div>
	 	</div>
	 </div>
</div>
<!-- 分配角色模态框 -->
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">分配角色</h4>
            </div>
            <div class="modal-body">
            	<form id="roleForm">
            		<input type="hidden" id="userId" name="userID"/>
	             	<label>选择角色:<font color="red">*</font></label>
	             	<select multiple id="roleId" name="roleIDs" class="form-control validate[required]" style="width:400px;height:100px;"></select>
            	</form>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" href="#" onclick="updateRole();">修改</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<!-- datatable -->
<script src="${ctx}/static/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/select2/select2.min.js" type="text/javascript"></script>
<script>
   var tb;
   $(function () {
		//列表初始化
		tb = $('#dataTables').dataTable({
				"bServerSide": true,
				"sPaginationType": "full_numbers",
				"bJQueryUI": true,
				"sDom": '<"">t<"F"ip>',
				"sAjaxSource": "${ctx}/api/user/list", //ajax调用接口
				"aoColumnDefs": [{sDefaultContent: '',aTargets: [ '_all' ]}],
	       		"aoColumns": [
					  	{ "sTitle" : "id", 	 "mData": "id" ,"class":"sClass"},
		                { "sTitle" : "手机号","mData": "telphone","class":"sClass" },
		                { "sTitle" : "邮箱","mData": "email","class":"sClass" },
		                { "sTitle" : "状态","mData": "isable","class":"sClass","mRender":function(data, type, full){
		                	var text;
	                    	if(full.isable=='1'){
	                    		text="<font color='blue'>正常</font>";
	                    	}else {
	                    		text="<font color='green'>冻结</font>"
	                    	}
	                    	return text;
	        				}
		                },
		                { "sTitle" : "创建时间","mData": "createTime","class":"sClass" },
		                {"sTitle" : "操作","mData" : "id", "mRender" : function ( data, type, full ) {
	                	  var text = '<div class="btn-group" style="text-align:left;"><button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">操作 <span class="caret"></span></button>';
							  text = text+'<ul class="dropdown-menu" role="menu">';
							  text += "<li><a href='${ctx}/api/user/updatePage?id="+full.id+"'>修改用户</a></li>";
							  text += '<li class="divider"></li>';
							  text += '<li><a href="#" onclick="deleteById(\''+full.id+'\');">删除用户</a></li>';
							  text += '<li class="divider"></li>';
							  text += '<li><a href="#" onclick="showRole(\''+full.id+'\');">分配角色</a></li>';
							  text += '<li class="divider"></li>';
							  if(full.isable=="1"){
								  text += '<li><a href="#" onclick="frozenById(\''+full.id+'\');" >冻结</a></li>';
							  }else{
								  text += '<li><a href="#" onclick="startById(\''+full.id+'\');" >启用</a></li>';
							  }
							  text += '<li class="divider"></li>';
							  text += '<li><a href="#" onclick="resetPass(\''+full.id+'\');">重置密码</a></li>';
							  text = text + '</ul></div>';
							  return text;
							} 
		                }
	            ],
		        "oLanguage" : {
		           "sProcessing" : "数据加载中······",
		           "sLengthMenu" : "显示 _MENU_ 条记录",
		           "sZeroRecords" : "没有您要搜索的内容！",
		           "sEmptyTable" : "列表中无数据存在！",
		           "sInfo" : "当前显示 _START_ 到 _END_ 条数据，共 _TOTAL_ 条数据",
		           "sInfoEmpty" : "显示 0 到 0 条记录",
		           "sInfoFiltered" : "数据列表中共  _MAX_ 条记录",
		           "oPaginate" : {
		               "sFirst" : "首页",
		               "sPrevious" : "上一页",
		               "sNext" : "下一页",
		               "sLast" : "末页"
		           }
		        },
		        "fnServerData" : function ( sSource, aoData, fnCallback, oSettings ) {
					oSettings.jqXHR = $.ajax( {
						"dataType" 	: 'json',
						"type" 		: "GET",
						"async"     : 'false',
						"url" 		: sSource,
						"data" 		: {
							'pageNum': (aoData[3].value/aoData[4].value)+1,
							'pageSize' :  aoData[4].value,
							'telphone'  :  $("#telphone").val(),
							'isable' : $('#isable').val()
						}, 
						"success"	: fnCallback
					} );
				},
		  });
   });
   
   //条件查询重新加载数据
   function query() {
 	  tb.fnDraw();
   };
   //删除方法
   function deleteById(userId){
	   if(confirm("确认删除吗")==true){
  		 $.ajax({
  			 async:false,
       		url:"${ctx}/api/user/delete",
       		data:{id:userId},
       		type:"POST",
       		dataType:"json",
       		success:function(data){
       			if(data.code="200"){
       				tb.fnDraw();
       			}else{
       				alert(data.message);
       			}
       		}
  		 });
  		 return;
  	 }else{
  		 return false;
  	 }
   }
   
   //冻结方法
   function frozenById(userId){
	   if(confirm("确认冻结账号吗")==true){
  		 $.ajax({
  			 async:false,
       		url:"${ctx}/api/user/frozen",
       		data:{id:userId},
       		type:"POST",
       		dataType:"json",
       		success:function(data){
       			if(data.code="200"){
       				tb.fnDraw();
       			}else{
       				alert(data.message);
       			}
       		}
  		 });
  		 return;
  	 }else{
  		 return false;
  	 }
   }
   //启用账户方法
   function startById(userId){
	   if(confirm("确认启用账号吗")==true){
  		 $.ajax({
  			 async:false,
       		url:"${ctx}/api/user/start",
       		data:{id:userId},
       		type:"POST",
       		dataType:"json",
       		success:function(data){
       			if(data.code="200"){
       				tb.fnDraw();
       			}else{
       				alert(data.message);
       			}
       		}
  		 });
  		 return;
  	 }else{
  		 return false;
  	 }
   }
   
   //重置密码
   function resetPass(userId) {
	   if(confirm("确认重置密码吗")==true){
	  		 $.ajax({
	  			async:false,
	       		url:"${ctx}/api/user/resetPass",
	       		data:{userId:userId},
	       		type:"POST",
	       		dataType:"json",
	       		success:function(data){
	       			if(data.code="200"){
	       				alert(data.message);
	       				tb.fnDraw();
	       			}else{
	       				alert(data.message);
	       			}
	       		}
	  		 });
	  		 return;
	  	 }else{
	  		 return false;
	  	 }
   }
   
  
	   //加载角色
	   function showRole(userId){
		   $('#userId').val(userId);
		   $("#roleModal").modal({show:true,backdrop: 'static', keyboard: false});
		   
		   $(function(){
			   $("#roleId").empty();
			   var chooseRole;
			   //获取角色数据
			  	$.ajax({
			  		async:false,
			  		type : "GET",
			  		url: "${ctx}/api/user/getUserRole?userId="+userId, 
			  		success 	: function(data) {
			  			if(data.data){
			  				chooseRole=data.data;
			  			}else{
			  				alert("加载用户已选角色数据异常!");
			  			}
			  		}
			  	});
		 	//获取角色数据
			$.ajax({
				async:false,
				type : "GET",
				url: "${ctx}/api/role/list/all", 
				success 	: function(data) {
					if(data.data){
						$.each(data.data, function(i, item){     
							  $("#roleId").append("<option value='"+item.id+"'>"+item.roleName+"</option>");
						});
						for(var j=0;j<chooseRole.length;j++){
							$("#roleId").find("option").each(function(i,item){
								if($(this).val()==chooseRole[j]){
									$('#roleId').find("option[value="+$(this).val()+"]").attr("selected","selected")
								}
							});
						}
					}else{
						alert("加载角色数据异常!");
					}
				}
			});
			$("#roleId").select2();
		   });
	   }
   //修改角色
   function updateRole(userId){
   		var role=$("#roleId").val();
		 $.ajax({
 			async:false,
       		url:"${ctx}/api/user/updateUserPermission",
       		data:$("#roleForm").serialize(),
       		type:"POST",
       		success:function(data){
       			if(data.code=="200"){
       				alert(data.message);
       				$("#roleModal").modal('hide');
       				tb.fnDraw();
       			}else{
       				alert(data.message);
       			}
       		}
  		 });
   }

</script>
</body>
</html>